@layer firstLayer,secondLayer;

p { 
  background-color: red;
  color: grey !important;
  border: 5px inset purple;
}


p#addSpecificity { 
  border-style: solid !important;
}

@layer firstLayer {
  #addSpecificity { /* 1-0-0 */
    background-color: blue;
    color: white !important;
    border-width: 5px;
    border-style: dashed !important;
  }
}

@layer secondLayer {
  p#addSpecificity { /* 1-0-1 */
    background-color: green;
    color: orange !important;
    border-width: 10px;
    border-style: dotted !important;
  }
  /* 非分层样式覆盖分层样式，后面的层中声明的样式覆盖先前的层中声明的样式 
   you can make non-layered styles override styles declared in layers
    or you can make styles declared in later layers override styles from earlier declared layers. 
  对于不含!important的样式，
  非分层样式 > 分层样式 
  分层样式中，后声明的层的样式 > 先声明的层的样式 

  对于含important的样式
  上述的顺序完全相反
  分层样式 > 不分层样式
  分层样式中，先声明的层的样式 > 后声明的层的样式

  优先权（层次） > 优先级
  layer > specificity
  */
}